<template>
    <div class=login>
        <div class="login-left">
            <div class="loginLeft-bottom">
                <p>正在登录</p>
                <p>疫情管理采集系统</p>
            </div>
        </div>
        <div class="login-right">
            <div class="login-right-top">
                <img src="../assets/img/index/login-r.png" alt="">
            </div>
            <p></p>
            <div class="input">
                <div class="input-name">
                    <img src="../assets/img/index/login-name.png" alt="">
                    <input type="text" placeholder="请输入登录账号" v-model="uname">
                </div>
                 <div class="input-name">
                    <img src="../assets/img/index/login-wps.png" alt="">
                    <input type="password" placeholder="请输入您的密码" v-model="upwd">
                </div>
                 <div class="iptTop ">
                    <span class="checkbox" @click="correctNum=!correctNum" :class="{active:correctNum}"><img src="../assets/img/index/login-correct.png" alt=""></span>
                    <span class="rember">记住我</span>
                </div>
            </div>
            <div class="btnLogin">
                <button @click="login">登录</button>
            </div>
        </div>
    </div>
</template>
<script>
const Base64 = require('js-base64').Base64
export default {
    data(){
        return{
           uname:'',
           upwd:'',
           correctNum:false,
        }
    },
    created(){
        // 在页面加载时从cookie获取登录信息
        let account = this.getCookie("account")
        let password = this.getCookie("password")
        console.log(account,password)
        // 如果存在赋值给表单，并且将记住密码勾选
        if(account){
            this.uname = account
            this.upwd= password
            this.correctNum = true
        }
    },
    mounted(){
        //回车键登录
        document.onkeydown = event=>{
            var e = event || window.event;
            if (e && e.keyCode == 13) { //回车键的键值为13
                this.login()
            }
        }
    },
    methods:{
        // 登录
        login(){
            this.axios.post('/monitor/Sys/Login?Username='+this.uname+'&Password='+this.upwd).then(res=>{
                if (res.data.code==0){
                    this.$router.push('/index/user')
                    // this.$router.push('/index/Home')
                    console.log(res)
                    sessionStorage.setItem('uname',this.uname);
                    sessionStorage.setItem('correctNum',this.correctNum);
                    sessionStorage.setItem('islogin',true);
                    sessionStorage.setItem('token',res.data.token);
                    this.setUserInfo()
                }else{
                     this.$message.error(res.data.msg);
                }
            })
        },
        // 储存表单信息
        setUserInfo(){
            if(this.correctNum){
                this.setCookie("account",this.uname)
                this.setCookie("password",this.upwd)    
            }else{
                this.setCookie("account","")
                this.setCookie("password","") 
            } 
        },
        // 获取cookie
        getCookie(key) {
            if (document.cookie.length > 0) {
                var start = document.cookie.indexOf(key + '=')
                if (start !== -1) {
                    start = start + key.length + 1
                    var end = document.cookie.indexOf(';', start)
                    if (end === -1) end = document.cookie.length
                    return unescape(document.cookie.substring(start, end))
                }
            }
            return ''
        },
        // 保存cookie
        setCookie(cName, value, expiredays) {
            var exdate = new Date()
            exdate.setDate(exdate.getDate() + expiredays)
            document.cookie = cName + '=' + decodeURIComponent(value) +
            ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
        },
    }
}

</script>
<style lang="sass" scoped>

</style>
<style scoped>
.login{
    display: flex;
    min-width: 1080px;
    min-height: 100vh;
}
.login-left{
    width: 56%;
    background: url('../assets/img/index/login-l.png');
    background-size: 100% 100%;
    position: relative;
}
.loginLeft-bottom{
    position: absolute;
    bottom: 36px;
    left: 36px;
    color: #fff;
    font-size: 28px;
    letter-spacing:6px;
}
.loginLeft-bottom p:first-child{
    margin-bottom: 2px;
}
.login-right{
    width:42%;
    padding: 7vw;
    /* padding: 90px; */
    /* padding-top: 150px; */
    padding-top: 10vw;
    padding-bottom: 0;
    box-sizing: border-box;
}
.login-right-top{
    color: #44566C;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-right-top img{
    width: 176px;
    height: 114px;
    margin-right: 20px;
}
.login-right-top span{
    margin-top: -10px;
    font-size: 60px;
    letter-spacing: 5px;
}
.login-right p{
    text-align: center;
    color: #8697A8;
    margin-top: 55px;
    margin-bottom: 33px;
    letter-spacing: 2px;
    font-size: 20px;
}
.login-right .input input{
    display: block;
    width: 100%;
    border: 1px solid #f2f2f2;
    background: #F8FAFB;
    font-size: 16px;
    padding: 0 0px 0 45px;
    outline: 0;
    height: 45px;
}
.input-name{
    margin-top: 20px;
    position: relative;
}
.input-name img{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translatey(-50%);
    left: 12px;
}
.iptTop{
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.rember{
    font-size: 15px;
    color: #444;
    margin: 0 0 0 10px;
}
.btnLogin{
    width: 100%;
    margin:40px auto 0;
}
.btnLogin button{
    background: #438AFE;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
    width: 100%;
    border: none;
    border-radius: 5px;
    outline: 0;
}
.btnLogin button::after{
    border: none;
}
.iptTop .checkbox{
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid #ddd;
    position: relative;
}
.iptTop .checkbox img{
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.iptTop .active{
    background:#438AFE ;
}
</style>